<template>
  <div class="repayment-card">
    <div class="title-wapper">
      <div class="left-text-wapper">剩余未还金额（元）</div>
      <div class="look-Billing">查看明细 ></div>
    </div>
    <div class="input-wapper">
      <input type="number" v-model="moneyValue" />
    </div>
    <div class="repayment-date">还款日 06/22</div>
    <template v-if="!$slots.bottomGroup">
      <div class="btn-groups">
        <van-button size="small" round type="default" @click="quikcRePaymentHandle">快速还款</van-button>
        <van-button size="small" round type="default">延期还款</van-button>
        <van-button size="small" round type="danger">分期还款</van-button>
      </div>
    </template>
    <template v-else>
      <slot name="bottomGroup"></slot>
    </template>
    <div class="bottom-tips">
      <span class="link-text">自动还款</span>
      <span>&nbsp 到期自动还</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "repaymentCard",
  components: {},
  props: {
    value: {
      type: String | Number,
      default: "12988.57"
    }
  },
  data() {
    // this.
    return {
      moneyValue: "12988.57"
    };
  },
  methods: {
    quikcRePaymentHandle() {
      this.$emit("quikcRePayment");
    }
  },
  watch: {
    value: {
      handler(newVal) {
        console.log("thi", this.$slots);
        this.moneyValue = newVal;
      }
    }
  }
};
</script>

<style lang='less' scoped>
.repayment-card {
  width: 3.34rem;
  height: 2.3rem;
  border-radius: 0.05rem;
  background-color: #fff;
  margin-top: 0.12rem;
  padding: 0.2rem 0.12rem;
  box-sizing: border-box;
  color: #a7a5a5;
  .title-wapper {
    display: flex;
    justify-content: space-between;

    .look-Billing {
      font-size: 0.13rem;
    }
  }
  .input-wapper {
    color: #323232;
    margin: 0.15rem 0;
    > input {
      border: none;
      width: 100%;
      font-size: 0.3rem;
      font-weight: 700;
      padding: 0;
    }
  }
  .bottom-tips {
    margin-top: 0.15rem;
    text-align: center;
    font-size: 0.12rem;
    font-weight: 500;
    .link-text {
      color: #6f98e1;
    }
  }
  .btn-groups {
    display: flex;
    margin-top: 0.4rem;
    justify-content: space-between;
    .van-button {
      width: 0.8rem;
    }
  }
}
</style>